<template>
  <div>
		<div class="main fle-aic" :class="{active:checked}" @click="changeStatus" :style="'background-color:' + (checked ? color: '#dcdfe6')">
			<div class="circle"></div>
		</div>
  </div>
</template>

<script>
  export default{
    components: {

    },
    data() {
      return {
				
      }
    },
		props:{
			checked: Boolean,
			color: {
				type: String,
				default: '#1e384c'
			},
		},
		model: {
			prop: 'checked',
			event: 'change'
		},
    methods: {
			changeStatus(){
				this.$emit('change', !this.checked)
			}
    },
    created() {

    },
    mounted() {

    }
  }
</script>

<style scoped lang="scss">
	.main{
		width: 40px;
		height: 20px;
		background-color: #dcdfe6;
		border-radius: 10px;
		position: relative;
		transition: .2s all;
		.circle{
			width: 16px;
			height: 16px;
			background-color: white;
			border-radius: 50%;
			position: absolute;
			left: 2px;
			transition: .2s all;
		}
		&.active{
			.circle{
				left: auto;
				right: 2px;
			}
		}
	}
</style>
